<extend name="Public:base" />
<block name="content">
    <style type="text/css">
        .popuping{
            z-index: 1050;
            width: auto;
            padding: 10px;
            margin-right: auto;
            margin-left: auto;

        }
        .bootbox.fade .popuping{
            -webkit-transform: translate(0,-25%);
            -ms-transform: translate(0,-25%);
            transform: translate(0,-25%);
            -webkit-transition: -webkit-transform .3s ease-out;
            -moz-transition: -moz-transform .3s ease-out;
            -o-transition: -o-transform .3s ease-out;
            transition: transform .3s ease-out;
        }
        .bootbox.in .popuping{
            -webkit-transform: translate(0,0);
            -ms-transform: translate(0,0);
            transform: translate(0,0);
        }
        .bootbox.in .popuping-content{
            position: relative;
            background-color: #fff;
            border: 1px solid #999;
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: 6px;
            outline: 0;
            -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
            box-shadow: 0 3px 9px rgba(0,0,0,0.5);
            background-clip: padding-box;
            padding: 20px;
        }
        div,ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #mytable1{
            display: none;
        }
    </style>
<div class="row">
	<div class="col-xs-12">
        <div class="page-header">
            <!--<button id="add" class="btn btn-primary btn-sm radius5">发放</button>-->
            <button id="select" class="btn btn-sm btn-primary radius5 select">选择</button>
            <button id="send" class="btn btn-sm btn-primary radius5 select">发放</button>
            <a href="{:U('Coupon/manage')}" class="btn btn-primary btn-sm radius5">返回</a>
        </div>
		<div class="table-responsive">
            <span>发放的电子券</span>
			<table class="table table-striped table-bordered table-hover" id="mytable">
				<thead>
					<tr>
						<th>电子券名称</th>
						<th>面值</th>
                        <th>类型</th>
                        <th>状态</th>
						<th>可用范围</th>
						<th>可用条件</th>
						<th>有效期</th>
					</tr>
				</thead>
				<tbody>
						<volist name="send" id="vo">
						<tr>
							<td>{$vo.volume_name}</td>
							<td>{$vo.total}</td>
                            <td><?php
								switch($vo['type']){
									case '1':
									echo '<span class="blue bold">代金券</span>';
                                break;
                                case '2':
                                echo '<span class="red bold">现金券</span>';
                                break;
                                }
                                ?></td>
                            <td>
                                <?php
								switch($vo['status']){
									case '1':
									echo '<span class="green bold">已生效</span>';
                                break;
                                case '0':
                                echo '<span class="red bold">已失效</span>';
                                break;
                                }
                                ?>
                            </td>
                            <td>{$vo.category}</td>
                            <td>订单满{$vo.min}可用</td>
                            <td>开始时间：{$vo.start_time}<br>到期时间：{$vo.end_time}</td>
						</tr>
                            <input type="hidden" id="coupon" value="{$vo.coupon}"/>
						</volist>
				</tbody>
			</table>
		</div>
	</div>
    <div class="col-xs-6" style="margin: 0 auto; float: none;">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" id="mytable1">
                <thead>
                <tr>
                    <th class="col-xs-6">师傅姓名</th>
                    <th class="col-xs-6">联系方式</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
    <div class="bootbox modal fade in" id="bootbox">
        <div class="popuping">
            <div class="popuping-content">
                <div class="row">
                    <div class="col-xs-12">
                        <div style="margin-bottom: 20px;">
                            姓名：<input name="name" type="text"  value="">
                            电话：<input name="phone" type="text"  value="">
                            <button id="search" type="button" class="btn btn-sm btn-primary radius5">搜索</button>
                            <button id="save" type="button" class="btn btn-sm btn-primary radius5">保存</button>
                            <button type="button" class="pull-right close">
                                <i class="icon-remove"></i>
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="mytable2">
                                <thead>
                                <tr>
                                    <th>师傅姓名</th>
                                    <th>联系方式</th>
                                    <th><input id="CheckAll" type="checkbox" /></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                                <div>
                                    <ul class="pagination" id="pagination">
                                    </ul>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="javascript">
<script>
$(function(){

    $("#select").click(function(){
        $("body").append("<div class=\"modal-backdrop fade in\"></div>");
        pagesHtml(1,1);
        $("#pagination li:first-of-type").trigger("click");
        $("#bootbox").show(400);
    });

    var nums;
    //点击页数时ajax
    $("#pagination").on("click","li",function(e){
        e.stopPropagation();
        var name = $("input[name=name]").val();
        var phone = $("input[name=phone]").val();
        var target = e.currentTarget;

        if ($(target).find("a>i").hasClass("icon-double-angle-left")) {
            nums = nums - 1;
        }else if($(target).find("a>i").hasClass("icon-double-angle-right")){
            nums = nums + 1;
        }else{
            nums = $(target).find("a").text();
        }

        ajaxDate(nums,name,phone);
    });

    $("#search").click(function(){
        var name = $("input[name=name]").val();
        var phone = $("input[name=phone]").val();
        ajaxDate(nums,name,phone);
    });

// //选中添加到页面的html
var dataList = [];
//存储选中的id值
var checkedId = [];
//存储id的扣件
function checkedIds(){

    //全选
    $('#CheckAll').click(function (e) {

        $("input[name='coupon[]']").prop('checked', this.checked);

        if (e.currentTarget.checked) {
            $("input[name='coupon[]']").each(function(i,element){
                var id = $(element).attr("value");
                checkedId.push(id);
            })
        }else{
            checkedId = [];
        }

        $("#mytable2 tbody tr input[name='coupon[]']").each(function(i,element){
            //console.log($(element).closest("tr").prop("outerHTML"));
            if (element.checked) {
                dataList.push($(element).closest("tr"));
            }
        });

        $("#mytable1 tbody").html("");
        $.each(dataList,function(i,element){
            $("#mytable1 tbody").append($(element).clone(true));
        });

        console.log(dataList);

        dataList = [];
    });


    //获取选中id的值
    $("input[name='coupon[]']").click(function(e){
        var target = e.currentTarget;

        var parent = $(target).closest("tr");
        if (target.checked) {
            var id = $(target).attr("value");
            checkedId.push(id);
        }else{
            checkedId.splice($.inArray(id,checkedId),1);
            // idAllArr.splice($.inArray(idArr,idAllArr),1);
        }

        $("#mytable2 tbody tr input[name='coupon[]']").each(function(i,element){
            //console.log($(element).closest("tr").prop("outerHTML"));
            if (element.checked) {
                dataList.push($(element).closest("tr"));
            }
        });

        $("#mytable1 tbody").html("");
        $.each(dataList,function(i,element){
            $("#mytable1 tbody").append($(element).clone(true));
        });

        dataList = [];

    });

}

//弹出框列表数据请求
function ajaxDate(nums,name,phone){
    $.ajax({
        type: "POST",
        data: {"pageIndex":nums,
                "name":name,
                "phone":phone
        },
        url:"{:U('Coupon/getUserInfo')}",
        dataType: "json",
        success: function(data){
            checkedId = [];
            $("#mytable2 tbody").html("");
            var content = "";
            //当前条数的id
            var ids = [];
            for (var i = 0; i < data.data.length; i++) {
                content += '<tr>';
                content += '<td>'+ data.data[i].user_name +'</td>' +
                           '<td>'+ data.data[i].phone +'</td>' +
                           '<td><input name="coupon[]" value="'+data.data[i].user_id+'" type="checkbox" id="'+ data.data[i].user_id;
                content += '"></td>';
                content += '</tr>';
            }
            $("#mytable2 tbody").append(content);
            $('#CheckAll').prop("checked",false);
            pagesHtml(data.pages,nums);
            checkedIds();

        },
        error: function(data){
         alert("请求发生错误，请刷新");
        }
    });
}

/*
    pagesHtml函数页数的html
    pages 总页数
    pageIndex 当前页面
*/

function pagesHtml(pages,pageIndex){
    $("#pagination").html("");
    var content = "";
     if (pageIndex > 1) {
      content += '<li>' +
                    '    <a href="#">' +
                    '        <i class="icon-double-angle-left"></i>' +
                    '    </a>' +
                    '</li>';
     }
     if (0<pages<10) {
        for (var i = 0; i < pages; i++) {
            //因为从0开始，而pageIndex是从1开始所以  pageIndex要减1
            if (i == pageIndex-1) {
                content += "<li class='active'>";
            }else{
                content += "<li>";
            }
            content += "<a href='#'>"+(i+1)+"</a>"
            content += "</li>";
        }
     }else if (pages>=10){
        for (var i = 0; i < 10; i++) {
            content += "<li>";
            content += "<a href='#'>"+(i+1)+"</a>"
            content += "</li>";
        }
     }
     if (pageIndex<pages) {
         content += '<li>' +
                    '    <a href="#">' +
                    '        <i class="icon-double-angle-right"></i>' +
                    '    </a>' +
                    '</li>';
     }
     $("#pagination").append(content);
}



    $("#save").click(function(){
        $("#mytable1 tbody tr").find("td:last-of-type").remove();
        $("#mytable1").show();
        $('.close').trigger("click");
    });


    $('.close').click(function(){
        $("#bootbox").hide(400);
        setTimeout(function(){
            $(".modal-backdrop.fade.in").remove()
        },200);
    });

	$("#search").click(function () {
        var url = $(this).attr('url');
        var query = $('.search-form').find('input,select').serialize();
        query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
        query = query.replace(/^&/g, '');
        if (url.indexOf('?') > 0) {
            url += '&' + query;
        } else {
            url += '?' + query;
        }
        window.location.href = url;
    });




$("#send").click(function(){
    var submit = function (v, h, f) {
        if (v == true) {
            if(checkedId.length == 0){
                $.jbox.info('请选择需发放的用户','提示');
            }else{
                $.ajax({
                    url:"{:U('Coupon/sendcoupon')}",
                    type:"get",
                    data:{
                        user : checkedId,
                        coupon :$('#coupon').val()
                    },
                    success:function(data){
                        if(data==1){
                            $.jbox.tip("发送成功！", 'loading');
                            window.setTimeout(function () {window.location.href="{:U('Coupon/manage')}"; }, 500);
                        }else{
                            $.jbox.info("存在已失效优惠券!",'提示');
                        }
                    }
                });
            }
        }else{

        }

        return true;
    };
    // 自定义按钮
    $.jbox.confirm("确认发放吗？", "提示", submit, { buttons: { '确定': true, '取消': false} });

});

});

</script>
</block>